<template>
  <el-row>
    <el-col :span="16">
      <div class="grid-content ep-bg-purple left">
        <h1>欢迎光临</h1>
        <p>本站点有<a href="#" class="link">《Vue3实战商城后台管理系统开发视频课程》</a>提供</p>
        <p>
          更多实战好课，等你来学
          <el-button plain size="default" class="details-button">查看详情</el-button>
        </p>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content ep-bg-purple right">
        <LoginForm/>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import "@/assets/main.styl"
</script>


<style scoped>
.left {
  height: 100vh;
  background: #6366f1;
  color: white;
  line-height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left h1{
  font-size: 40px;
  line-height: 90px;
}
.left p:first-of-type{
  font-size: 20px;
  line-height: 50px;
}
.left p:last-of-type{
  font-size: 20px;
  line-height: 50px;
}
.right {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.link {
  color: white;
  text-decoration: none;
}

.link:hover {
  color: rgb(54, 10, 200);
}

.details-button {
  margin-left: 10px;
  width: 90px;
  height: 35px;
  background: #00000000;
  color: white;
}
</style>